<template>
    <div style="display: inline-block;">
        <!-- 关机时播放关机图 -->
        <img class="off" v-if="isOff" src="~@/assets/img/off.png">
        <!-- 错误时播放雪花屏 -->
        <img class="xh"  v-if="isError" src="~@/assets/img/xh.gif">
        <!-- 加载时播放加载中 -->
        <img class="load"  src="~@/assets/img/loading.gif">
        <!-- 默认电视直播组件 -->
        <Live 
            ref="Live" 
            v-if="!isOff" 
            class="live" 
            @changeTVNum="changeTVNum"
            @error="isError=true"/>
        <Nes ref="Nes" v-if="isOff" class="Nes" />

    </div>
</template>

<script>
import Nes from './Nes.vue'
import Live from './Live'
export default {
    name:'Screen',
    components:{
        Live,
        Nes
    },
    data () {
        return {
            isOff:false,
            isError:false,
            ts:0
        }
    },
    watch:{
        isOff:function(){
            if(window.audio_ctx){
                
                window.audio_ctx.close();
            }
        }
    },
    methods:{
        fullScreen:function(){
            if(this.$refs.Live){
                this.$refs.Live.fullScreen()
            }
            if(this.$refs.Nes){
                this.$refs.Nes.fullScreen()
            }
        },
        changeTVNum:function(num,title){
            this.$emit('changeTVNum',num,title)
        },
        setOff:function(boo){
            this.isOff=boo
            
        },
        setVolume:function(val){
            if(this.$refs.Live){
                this.$refs.Live.setVolume(val)
            }
        },
        changeVideo:function(tv){
            this.isError=false
            if(this.$refs.Live){
                this.$refs.Live.changeNumVideo(tv)
            }
        },
        onError:function(e){
            this.isError=true
            console.log(e)
        },
    }
}
</script>

<style scoped>
.off{
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
}
.xh{
    width: 100%;
    height: 100%;
    z-index: -3;
    position: absolute;
    top: 0;
    left: 0;
}
.load{
    width: 100%;
    height: 100%;
    z-index: -4;
    position: absolute;
    top: 0;
    left: 0;
}
.live{
    width: 100%;
    height: 100%;
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
}
.Nes{
    width: 100%;
    height: 100%;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
}
</style>
